<template>
    <EditAvatar v-model="ifEditAvatar"></EditAvatar>
    <el-dialog title="修改信息" width="500" :append-to-body="true" v-model="infoDialogRef">
        <el-form>
            <el-form-item>
                <div class="infoItem" @click="showEditAvatar">
                    <span class="infoDesc">头像</span>
                    <div class="infoData">
                        <img class="avatar" :src="userStore.avatar" />
                        <span class="detailIcon">></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="infoItem">
                    <span class="infoDesc">昵称</span>
                    <div class="infoData">
                        <span>待风吟</span>
                        <span class="detailIcon">></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="infoItem">
                    <span class="infoDesc">性别</span>
                    <div class="infoData">
                        <span>男</span>
                        <span class="detailIcon">></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="infoItem">
                    <span class="infoDesc">地区</span>
                    <div class="infoData">
                        <span>广东</span>
                        <span class="detailIcon">></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="infoItem">
                    <span class="infoDesc">手机号</span>
                    <div class="infoData">
                        <span>1111111111</span>
                        <span class="detailIcon">></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="infoItem">
                    <span class="infoDesc">账号</span>
                    <div class="infoData">
                        <span>{{ userStore.username }}</span>
                        <span class="detailIcon">></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="infoItem">
                    <span class="infoDesc">个性签名</span>
                    <div class="infoData">
                        <span>aaaaaaa</span>
                        <span class="detailIcon">></span>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialogFooter">
                <el-button type="primary" @click="editInfo">修改</el-button>
                <el-button @click="cancleEdit">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import { ref } from 'vue'

const ifEditAvatar = ref<boolean>(false)
const userStore = useUserStore()
const infoDialogRef = defineModel()

const editInfo = () => {
    infoDialogRef.value = false
}

const cancleEdit = () => {
    infoDialogRef.value = false
}

const showEditAvatar = () => {
    ifEditAvatar.value = true
}
</script>

<style scoped lang="scss">
.el-form-item {
    height: 50px;
    margin: 0;
    border-bottom: 1px solid rgb(220, 220, 220);
    cursor: default;

    :hover {
        background-color: rgb(220, 220, 220);
        cursor: pointer;
    }
}

.infoItem {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    @include flex-layout(flex, normal, space-between);
}

.infoDesc {
    color: #000;
}

.infoData {
    .detailIcon {
        margin-left: 5px;
    }
}

.avatar {
    width: 30px;
    height: 30px;
    transform: translateY(5px);
    border-radius: 3px;
}
</style>
